<template>
  <video id="videoPlayer" class="video" danmu-btn enable-danmu :initial-time="process" :poster="poster"
         :title="title"
         :src="path" play-btn-position="center" :danmu-list="danmuList" show-mute-btn :autoplay="autoplay"
         enable-play-gesture controls @error="errorCallback" @play="playCallback"
         @pause="pauseCallback" @ended="endCallback" @timeupdate="timeupdateCallback" @waiting="waitingCallback"
         @progress="progressCallback" @loadedmetadata="loadedmetadataCallback" @fullscreenchange="fullscreenchange"
  >
    <cover-view class="video-mask">
      <cover-view @click="openinput()">我是一个遮罩</cover-view>
      <input v-if="isSHow" type="text" class="msg-input" value="" placeholder="我输输入框" />
    </cover-view>
  </video>
</template>

<script>
const lastSrc = ''
export default {
  props: {
    src: {
      // 播放地址
      type: String,
      default: ''
    },
    title: {
      // 标题
      type: String,
      default: ''
    },
    poster: {
      // 封面
      type: String,
      default: ''
    },
    process: {
      // 初始播放进度
      type: Number,
      default: 0
    },
    direction: {
      // 初始播放方向 0 正常竖向,90 屏幕逆时针90度,-90 屏幕顺时针90度
      type: Number,
      default: 0
    },
    objectFit: {
      // 视频填充方式  contain 包含,fill 填充,cover 覆盖
      type: String,
      default: 'contain'
    },
    autoplay: {
      // 是否自动播放
      type: Boolean,
      default: true
    },
    danmuList: {
      // 初始弹幕列表
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      path: this.src,
      isSHow: false,
      videoContext: null
    }
  },
  computed: {
    // path() {
    //   return this.src
    // }
  },
  // watch: {
  //  'danMu.text': {
  //   handler(newName, oldName) {
  //        this.sendDanmu();
  //   },
  //   // 代表在wacth里声明了test这个方法之后立即先去执行handler方法
  //   immediate: true
  //   }
  // },
  methods: {
    openinput() {
      this.isSHow = !this.isSHow
    },
    playCallback(e) {
      // console.log(e);
      this.$emit('play', e)
      // 当开始/继续播放时触发play事件
    },
    pauseCallback(e) {
      // console.log(e);
      this.$emit('pause', e)
      // 当暂停播放时触发 pause 事件
    },
    endCallback(e) {
      this.$emit('end', e)
      // 当播放到末尾时触发 ended 事件
    },
    timeupdateCallback(e) {
      this.$emit('timeupdate', e)
      // console.log(currentTime,duration);
      // 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
    },
    waitingCallback(e) {
      // 视频出现缓冲时触发
      this.$emit('waiting', e)
    },
    progressCallback(e) {
      // 加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比
      this.$emit('progress', e)
    },
    loadedmetadataCallback(e) {
      // 视频元数据加载完成时触发。event.detail = {width, height, duration}
      this.$emit('loadedmetadata', e)
    },
    fullscreenchange(e) {
      this.$emit('fullscreenchange', e)
    },
    errorCallback(e) {
      // 视频播放出错时触发
      console.error(e)
      this.$emit('error', e)
    },
    fullScreen() {
      this.videoContext
      && this.videoContext.requestFullScreen({
        direction: 90
      })
    },
    exitFullScreen() {
      this.videoContext && this.videoContext.exitFullScreen()
    },
    getRandomColor() {
      const rgb = []
      for (let i = 0; i < 3; ++i) {
        let color = Math.floor(Math.random() * 256).toString(16)
        color = color.length === 1 ? `0${color}` : color
        rgb.push(color)
      }
      this.$emit('danmuColor', `#${rgb.join('')}`)
      return `#${rgb.join('')}`
    },
    sendDanmu(text = '', color) {
      this.videoContext.sendDanmu({
        text,
        color: color || this.getRandomColor()
      })
    },
    play() {
      console.log('play')
      this.videoContext && this.videoContext.play()
    },
    switchPlay(src) {
      this.videoContext && this.videoContext.stop()
      this.path = src
      console.log('switchPlay')
      this.videoContext && this.videoContext.play()
    },
    replay() {
      console.log('replay')
      this.videoContext && this.videoContext.stop()
      this.videoContext && this.videoContext.play()
    },
    stop() {
      console.log('stop')
      this.videoContext && this.videoContext.stop()
    },
    seek(s = 0) {
      console.log('seek')
      this.videoContext && this.videoContext.seek(s) // 单位秒
    },
    pause() {
      console.log('pause')
      this.videoContext && this.videoContext.pause() // 暂停
    },
    playbackRate(rate = 1.0) {
      console.log('playbackRate')
      this.videoContext && this.videoContext.playbackRate(rate) // 支持 0.5/0.8/1.0/1.25/1.5
    }
  },
  onReady() {
    this.videoContext = uni.createVideoContext('videoPlayer', this)
  }
  // mounted() {
  //  this.videoContext = uni.createVideoContext('videoPlayer', this);
  // }
}
</script>

<style scoped lang="scss">
$video-width: 750rpx;
$video-height: 400rpx;

.video {
  position: relative;
  width: $video-width;
  height: $video-height;
}

.video-mask {
  display: flex;
  // flex-direction: column;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: 80rpx;
  width: 100%;
  height: 100rpx;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.msg-input {
}
</style>
